<template>
    <div>

        <div class="title">
            <div>申请提现</div>
            <div class="flex-center">
            <div @click="onWithdraw" style="color: #000000;cursor: pointer;"> <i class="el-icon-circle-plus"
                    style="color: #EF1F1F;"></i> 添加新的收款账户</div>
                    <div class="returnClass" @click="$emit('returnClick')">
                        <img src="../../../../../static/engineering5188/common/return.png" alt=""/>
                        返回
                    </div>
                </div>
        
            
        </div>

        <div class="contentDiv">

            <p class="contentName">收款账户：</p>


            <div v-for="(item, index) in list" :key="index" style="cursor: pointer;"
                :class="listIdShow == item.id ? 'yinhangDivHover' : 'yinhangDiv'" @click="onList(item.id)">
                <div class="yhImg">图片</div>
                <div>
                    <p>{{ item.name }}</p>
                    <p>{{ item.bank_name }}：{{ item.bankcard_no }}</p>
                </div>
            </div>

            <p class="WithdrawalAmount">提现金额：</p>

            <el-input class="numInput" v-model="num" type="number"></el-input>

            <div class="limit">最低提现额度：￥ 100.00</div>
            <button @click="payButton" class="payButton">提现</button>
        </div>

        <el-dialog title="新增收款账户" :visible.sync="dialogVisible" class="dialogDiv" :before-close="handleClose">
            <el-form :model="form" label-width="110px">
                <el-form-item label="收款人姓名：">
                    <el-input class="dialogInput" v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="银行账号：">
                    <el-input class="dialogInput" v-model="form.bankcard_no"></el-input>
                </el-form-item>
                <el-form-item label="开户银行：">
                    <el-input class="dialogInput" v-model="form.bank_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-switch :active-value="1" :inactive-value="0" v-model="form.default"></el-switch>
                    <span class="shezhi">设置为默认账户</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button class="colseBtn" @click="cancel">取消</el-button>
                <el-button class="payBtn" type="primary" @click="confirm">确定</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    name: "ApplicationForWithdrawal",
    data() {
        return {
            listIdShow: "",
            dialogVisible: false,
            form: {
                token: "",
                id: "",
                name: '',
                bankcard_no: '',
                bank_name: '',
                // 1默认 0 不默认
                default: 0
            },
            num: 0,
            list: []
        }
    },

    computed: {
        ...mapState([
            "userInfo",
        ]),
    },
    created() {
        this.getList()
    },
    methods: {
        payButton() {
            this.$httpApi("/api/addTx", {
                token: this.userInfo.token,
                card_id: this.listIdShow,
                money: this.num
            }, "post").then(res => {
                if (res.code == 200) {
                    alertSucc(res.msg);
                } else {
                    alertErr(res.msg);
                }
            })
        },
        onList(id) {
            this.listIdShow = id
        },
        getList() {
            this.$httpApi("/api/userBankList", {
                token: this.userInfo.token
            }, "get").then(res => {
                if (res.code == 200) {
                    console.log(res)
                    this.list = res.data
                } else {
                    alertErr(res.msg);
                }
            })
        },
        onWithdraw() {
            this.form = {
                token: "",
                id: "",
                name: '',
                bankcard_no: '',
                bank_name: '',
                // 1默认 0 不默认
                default: 0
            }
            this.dialogVisible = true
        },

        openDialog() {
            this.dialogVisible = true;
        },
        handleClose(done) {
            this.dialogVisible = false;
            done();
        },
        cancel() {
            this.dialogVisible = false;
        },
        confirm() {
            console.log('确定按钮被点击，表单数据：', this.form);
            // 这里添加将表单数据发送到后端等实际逻辑
            this.form.token = this.userInfo.token
            this.$httpApi("/api/addUserBank", {
                ...this.form,
            }, "post").then(res => {
                if (res.code == 200) {
                    //   this.$store.dispatch("getUserloginedInfo");
                    this.getList();
                    this.dialogVisible = false;
                    alertSucc(res.msg);
                } else {
                    alertErr(res.msg);
                }
            })


        }
    }

}
</script>

<style lang="less" scoped>
/deep/ .el-icon-close:before {
    font-size: 26px;
}

.colseBtn {
    width: 133px;
    height: 40px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #D5DBE8;

    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #333333;

    font-style: normal;
    text-transform: none;
}

.payBtn {
    width: 133px;
    height: 40px;
    background: #0052D9;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid rgba(0, 0, 0, 0);

    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #FFFFFF;

    font-style: normal;
    text-transform: none;
}

.dialog-footer {
    text-align: center;
}

.shezhi {
    padding-left: 15px;

    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #666666;
    position: relative;
    top: 3px;
    font-style: normal;
    text-transform: none;
}

.dialogInput {
    width: 400px;

}

/deep/ .el-dialog {
    width: 596px;
}

/deep/ .el-dialog__header {

    height: 60px;
    background: #F7F7F7;
    border-radius: 4px 4px 0px 0px;
}

/deep/ .el-input__inner {

    height: 44px;
    background: #FAFAFA;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #E6E5E5;
}

.payButton {
    width: 200px;
    height: 48px;
    background: #0052D9;
    border-radius: 4px 4px 4px 4px;

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 18px;
    color: #FFFFFF;
    margin-top: 23px;
    font-style: normal;
    text-transform: none;
}

.limit {

    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 14px;
    color: #747474;
    margin-top: 11px;
    font-style: normal;
    text-transform: none;
}

.numInput {
    width: 630px;

}

.yhImg {
    width: 44px;
    height: 44px;
    background-color: yellow;
    margin-right: 12px;
}

.yinhangDiv {
    width: 420px;
    height: 83px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #E6E6E6;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin-top: 12px;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.yinhangDivHover {
    width: 420px;
    height: 83px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    border: 1px solid #0052D9;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin-top: 12px;
    font-style: normal;
    text-transform: none;
    display: flex;
    align-items: center;
    padding-left: 24px;
}

.contentName {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #4D4D4D;
    font-style: normal;
    text-transform: none;
}

.WithdrawalAmount {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 14px;
    color: #4D4D4D;
    font-style: normal;
    text-transform: none;
    margin-top: 25px;
    margin-bottom: 15px;
}

.contentDiv {
    padding: 50px 49px;
}

.el-icon-circle-plus {
    font-size: 20px;
}

.title {
    height: 56px;
    background: #FFFFFF;
    line-height: 56px;
    border-radius: 0px 0px 0px 0px;
    font-family: Microsoft YaHei, Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    font-style: normal;
    text-transform: none;
    border-bottom: 4px solid #F5F5F5;
    padding-left: 32px;
    display: flex;
    justify-content: space-between;
    padding-right: 32px;
}

.returnClass{
    img{
        width: 12px;
        height: 12px;
        margin-right: 5px;
    }
    display: flex;
    align-items: center;
    cursor: pointer;
    margin-left: 80px;
}
.flex-center{
    display: flex;
    align-items: center;
}
</style>